<template>
    <div ref="topDiv" class="artical">
        <p class="title">{{info.infoTitle}}</p>
        <p class="browse">{{info.browse}}次浏览 | 发布时间：{{info.createDate}}</p>
        <div class="content" v-html="info.infoContent"></div>
        <div class="down_info">
            <p class="down_red_line_4">一</p>
            <p class="down_red_line_1">一</p>
        </div>
    </div>
</template>

<script>

import {Api} from '../../../api/index.js'
import { sessionStorage, cookie } from '../../../common/cacheUtils.js';


export default {

     data() {
         return {
             info:{}
        }
    },
    mounted(){
        this.$refs.topDiv.style.height = (window.innerHeight - 120) + 'px';
        this.$http.get(Api.getArtical+"/"+this.$route.query.id).then(res => {
            if(res.data.status == 200){
                this.info = res.data.data;
                this.info.createDate = this.formatDate(new Date(this.info.createDate), 'yyyy-MM-dd');
            }
        }).catch(e => {
            this.$Message.error("数据获取失败")
        });
    },
    methods:{
        formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            }
    }
}
</script>

<style scoped>
.artical{
    height: 100%;
    min-width:1250px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title{
    margin-top:58px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 38px;
}

.browse{
    margin-top:25px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #757575;
    line-height: 38px;
}

.content{
    margin-top:48px;
    width:1200px;
    flex-grow: 1;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 38px;
}

.down_info{
display: flex;
flex-direction: column;
height: 200px;
}

.down_red_line_4{
    margin-top:48px;
    width:1200px;
    height: 4px;
    color:white;
    background-color: red;
}

.down_red_line_1{
    margin-top:3px;
    width:1200px;
    height: 1px;
    color:white;
    background-color: red;
}

.down_company_info{
    margin: 24px;
    width: 1200px;
    height: 24px;
    text-align: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ADADAD;
    line-height: 24px;
}
</style>